{% load my_tags %}
{% get_categorys as categorys %}
{% get_tags as tags %}
<style>
    .navbar {
        border: none;
        border-radius: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    }

    .navbar:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    .navbar-brand {
        font-weight: 700;
        font-size: 22px;
        color: #ecf0f1 !important;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        padding: 15px 20px;
    }

    .navbar-brand:hover {
        color: #3498db !important;
        transform: translateY(-2px);
    }

    .navbar-nav > li > a {
        color: #ecf0f1 !important;
        font-weight: 500;
        padding: 15px 20px;
        transition: all 0.3s ease;
        position: relative;
        border-radius: 4px;
        margin: 0 5px;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: #3498db !important;
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

    .navbar-nav > li > a:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: #3498db;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .navbar-nav > li > a:hover:after {
        width: 80%;
    }

    .navbar-form {
        margin: 10px 0;
        padding: 0 15px;
    }

    .navbar-form .form-group {
        margin-right: 10px;
    }

    .navbar-form .form-control {
        border-radius: 20px;
        border: none;
        padding: 8px 15px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        width: 220px;
    }

    .navbar-form .form-control:focus {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(52, 152, 219, 0.6);
        width: 250px;
    }

    .navbar-form .btn {
        border-radius: 20px;
        background-color: #3498db;
        border: none;
        color: white;
        font-weight: 500;
        padding: 8px 20px;
        transition: all 0.3s ease;
    }

    .navbar-form .btn:hover {
        background-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .navbar-toggle {
        border: none;
        background: transparent !important;
    }

    .navbar-toggle:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .navbar-toggle .icon-bar {
        background-color: #ecf0f1;
        transition: all 0.3s ease;
    }

    .navbar-toggle:hover .icon-bar {
        background-color: #3498db;
    }

    .dropdown-menu {
        border: none;
        border-radius: 4px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        background-color: #2c3e50;
    }

    .dropdown-menu > li > a {
        color: #ecf0f1;
        padding: 8px 20px;
        transition: all 0.2s ease;
    }

    .dropdown-menu > li > a:hover {
        background-color: #3498db;
        color: white;
    }

    .dropdown-menu .divider {
        background-color: #34495e;
        margin: 5px 0;
    }

    .navbar-right > li > a {
        position: relative;
        overflow: hidden;
    }

    .navbar-right > li > a:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: all 0.5s ease;
    }

    .navbar-right > li > a:hover:before {
        left: 100%;
    }

    @media (max-width: 767px) {
        .navbar-nav > li > a {
            margin: 0;
            border-radius: 0;
        }

        .navbar-form .form-control {
            width: 100%;
            margin-bottom: 10px;
        }

        .navbar-form .btn {
            width: 100%;
        }

        .navbar-collapse {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
    }
</style>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'main:index' %}">软件库</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                {% for c in tags %}
                    <li class="">
                        <a href="{% url 'main:files_by_tag' c.id %}"> {{ c.title }}
                        </a>
                    </li>
                {% endfor %}

                {% if request.user.is_superuser %}
                    <li class="">
                        <a href="{% url 'admin:index' %}"> 管理员后台</a>
                    </li>
                {% endif %}

                <form class="navbar-form navbar-left" method="get" action="/search/">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜你想要的" name="q">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    <li><a href="{% url 'user:files_create' %}" role="button">上传文件</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">{{ request.user.username }}<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'user:center' %}">个人中心</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'messagesite:list' %}">
                                    消息
                                    {% with unread_count=user.received_messages.filter.unread.count %}
                                        {% if unread_count %}
                                            <span class="badge bg-danger">{{ unread_count }}</span>
                                        {% endif %}
                                    {% endwith %}
                                </a>
                            </li>
                            <li><a href="{% url 'user:manage_files' %}">文章管理</a></li>
                            <li><a href="{% url 'user:change' %}">修改密码</a></li>
                            <li><a href="{% url 'user:logout' %}">退出</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="{% url "user:login" %}">登录</a></li>
                    <li><a href="{% url "user:regist" %}">注册</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>